<template>
	<div class="forget">
		<div class="forget-con">
			<Card icon="log-in" title="忘记密码" :bordered="false">
				<Form ref="forgetForm" :model="formValidate" :rules="ruleValidate">
					<FormItem prop="phone">
						<Input v-model="formValidate.phone" placeholder="请输入手机号码">
						<span slot="prepend">
			                <Icon :size="16" type="ios-phone-portrait"></Icon>
			               </span>
						</Input>
					</FormItem>
					<FormItem class="phoneVerification" prop="code">
						<div class="phoneVerificationCode">
							<Input v-model="formValidate.code" placeholder="请输入验证码">

							</Input>
							<div class="phoneVerficationImage" @click='getCode' v-text="codeText" :disabled='disableButton'>获取验证码</div>
						</div>
					</FormItem>
					<FormItem prop="password">
						<Input type="password" v-model="formValidate.password" placeholder="请输入新密码">
						<span slot="prepend">
                            <Icon :size="14" type="md-lock"></Icon>
                        </span>
						</Input>
					</FormItem>
					<FormItem prop="passwdCheck">
						<Input type="password" v-model="formValidate.passwdCheck" placeholder="请确认新密码">
						<span slot="prepend">
                            <Icon :size="14" type="md-lock"></Icon>
                        </span>
						</Input>
					</FormItem>
					<FormItem>
						<Button type="primary" @click="btn" :disabled='disabledNext' long>确定</Button>
					</FormItem>
				</Form>
			</Card>
		</div>
	</div>
</template>

<script>
let timer
export default {
  data () {
    return {
      formValidate: {
        phone: '',
        code: '',
        password: '',
        passwdCheck: ''
      },
      codeText: '获取验证码',
      count: 120,
      disableButton: false,
      disabledNext: false,
      ruleValidate: {
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }
          //						{
          //							pattern: /^1[3456789]\d{9}$/,
          //							message: "请输入正确的手机号",
          //							trigger: "blur"
          //						}
        ],
        code: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        }],
        passwdCheck: [{
          required: true,
          message: '请确认新密码',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    getCode () {
      this.disableButton = true
      this.getCodeSetTimeout()
      let params = this.qs.stringify({
        accountNameOrPhone: this.formValidate.phone
      })
      // console.log(params)
      this.axios.post('captcha/sms', params).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          if (res.data.code == 500) {
            this.$Message.info(res.data.msg)
          } else {
            this.$Message.info(res.data.msg)
            this.clearTimeout()
          }
        }
      })
    },
    btn () {
      this.$refs['forgetForm'].validate((valid) => {
        if (valid) {
          this.disabledNext = true
          let params = this.qs.stringify({
            phone: this.formValidate.phone,
            newPassword: this.formValidate.password,
            code: this.formValidate.code,
            confirmPassword: this.formValidate.passwdCheck
          })
          this.axios.post('index/admin/forgotPassword', params).then((res) => {
            if (res.data.code == 200) {
              if (res.data.code == 401) {
                this.$Message.info(res.data.msg)
                this.$router.push({
                  name: 'Login'
                })
                this.disabledNext = false
              } else {
                this.disabledNext = false
                this.formValidate.phone = ''
                this.formValidate.code = ''
                this.formValidate.password = ''
                this.formValidate.passwdCheck = ''
                this.$Message.info(res.data.msg)
              }
            }
          })
        }
      })
    },
    getCodeSetTimeout () {
      let $this = this
      timer = setInterval(function () {
        if ($this.count > 0) {
          $this.codeText = $this.count
          $this.count--
        } else {
          $this.clearTimeout()
        }
      }, 1000)
    },
    clearTimeout () {
      clearInterval(timer)
      this.count = 120
      this.codeText = '获取验证码'
      this.disableButton = false
    }

  },
		 mounted () {
    this.$Message.config({
      top: 250
    })
  }
}
</script>

<style lang="less">
.forget {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/bg-bank.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  .forget-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
    .phoneVerification {
      .phoneVerificationCode {
        display: flex;
        .phoneVerficationImage {
          background-color: #2d8cf0;
          width: 55%;
          height: 32px;
          margin-left: 10px;
          color: white;
          text-align: center;
        }
      }
    }
  }
}
</style>
